<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="com.ipt.frm.util.Utilidades" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/tables.css"/>
<title>Index</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
</head>
<body>
<div id="content">
<h1 align="center">
<span> 
	<%
		String user=  (String)session.getAttribute("user");
		if(user != null){
			out.println("Bienvenido: " +user);
			 
		}else{
			out.println("[x] No registrado");
		}
	%>
	</span>
</h1>

<!-- <h2>$(sessionScope.user)</h2> -->

<h3 align="center">Hoy es día: <%=Utilidades.getActualDate()%></h3>

	<h1 class="textoazul" align="center">Índice de Ejemplos</h1>
		<!-- TAG NAV aporta un calor semántico para el contenido interno,
		en este caso de Navegación -->
		<center>
	<nav>
		<ol><!-- Ordered List -->
			<li><a href="psx">Hello World!</a></li>
			<li><a href="request-info">Ejemplo Request Info por Get</a></li>
			<li><a href="request-info?nombre=rober">Ejemplo Request Info por Get con parámetros</a></li>
			<li><a href="ranking">Ranking Alumnos</a></li>
			<li><a href="FormularioUpload.jsp">Formulario para enviar archivo</a></li>
			<li><a href="JavaScript/javaScript.jsp">Ejemplos de JavaScript</a></li>
			<li><a href="JQuery/jquery.jsp">Ejemplos de JQuery</a></li>
			<li><a href="FormularioAcuseRecibo.jsp">Formulario Acuse Recibo</a></li>
			<li><a href="NewFile.jsp">NewFile</a></li>
		</ol>
	</nav>
	</center>
	
	
	
	<hr/>
	
	<!-- Formulario para realizar petición POST al Request de Info -->
	<h3>Formulario por POST</h3>
	<form action="request-info" method="post">
	<label>Nombre:</label><input type="text" name="nombre" placeholder="Escribe tu nombre"/>
	<input type="submit" value="Enviar"/>	
	</form>
	
	<hr/>
	
	<h3>Formulario por GET</h3>
	<form action="request-info" method="get">
	<label>Nombre:</label><input type="text" name="nombre" placeholder="Escribe tu nombre"/>
	<input type="submit" value="Enviar"/>	
	</form>
	
	<hr/>

	<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed malesuada lectus. Cras lacus ligula, commodo nec aliquam aliquet, porta a massa. Ut eleifend feugiat nunc, at ullamcorper lacus mattis ut. Curabitur accumsan iaculis odio, nec dictum nisl malesuada a. Vestibulum condimentum risus metus. Donec suscipit imperdiet orci sit amet fringilla. Suspendisse tristique placerat mauris at cursus. Suspendisse ullamcorper ac leo et tincidunt. Vestibulum nec accumsan tellus. Aliquam luctus arcu a neque pulvinar vestibulum. Ut vel dictum est, in dictum odio. Nam mi felis, tincidunt ut cursus elementum, blandit sit amet lorem. Aliquam mi ligula, fermentum ut odio ac, condimentum condimentum dolor.</p>
	
	<hr/>
	
	<h1 class="titulo">Tipos de Cabeceras</h1>
	<% for (int i=1; i<7; i++){ 
			out.print("<h"+i+">Cabecera  "+i+"</h"+i+">");
		} //end for %>
		
		
		<script>
		$( document ).ready(function() {
			//Aplicar librería para tablas
			$('#tabla').dataTable();
			
			//Cambiar css dinámicamente
			$("p").css("border","3px groove #0fffff");
			$("p").css("padding","15px");
			  //Selecciona todos los parrafos
			  $("p").click(function(){
				 $(this).hide(); 
			  });
			});
		</script>
		
		
		
		<table id="tabla" border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Pie de Página</td>
    </tr>
  </tfoot>
  <tbody>
  <% for (int i=0 ; i<500 ; i++) {
  out.print(" <tr><td>January"+i+"</td><td>$100"+i+"</td></tr>");
  }
  %>
  </tbody>
</table>
		
		</div><!-- id="content" -->
		<!-- <script>
		function init(){
			alert('Hello world');
		}
		
		//Esperamos a cargar toda la página para llamar a la función de init
		window.onload = init();
		</script> -->
		<br/>
		
<footer align="center"> 
Ipartek Servicios Informacticos &copy; <%=Utilidades.getActualYear() %>
</footer>
</body>
</html>